<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { showToast } from "vant";
import myAxios from "@/plugins/myAxios";
import "vant/es/toast/style";
import qs from "qs";
import UserCardList from "@/components/UserCardList.vue";

const route = useRoute();
let userList = ref(null);

onMounted(async () => {
  const data = await myAxios
    .get("/user/search/tags", {
      params: {
        tagNameList: route.query.tagNameList,
      },
      paramsSerializer: (params) => {
        return qs.stringify(params, { indices: false });
      },
    })
    .then(function (response) {
      showToast("请求成功");
      return response;
    })
    .catch(function (error) {
      // showToast(error.message);
    });
  const { message, description, data: user } = data;
  if (user) {
    userList.value = user;
  } else {
    userList.value = [];
    showToast(description.length ? description : message);
  }
});
</script>

<template>
  <van-empty
    image="search"
    description="搜索结果为空"
    v-if="userList?.length === 0"
  />
  <user-card-list :user-list="userList ?? []" />
  <!--  <van-card-->
  <!--    :tag="user.gender === 0 ? '女' : '男'"-->
  <!--    :desc="user.profile"-->
  <!--    :title="`${user.username} (${user.planetCode})`"-->
  <!--    :thumb="user.avatarUrl"-->
  <!--    v-for="user in userList"-->
  <!--    :key="user.id"-->
  <!--  >-->
  <!--    <template #tags>-->
  <!--      <van-tag-->
  <!--        v-for="tag in JSON.parse(user.tags)"-->
  <!--        :key="tag"-->
  <!--        plain-->
  <!--        type="primary"-->
  <!--        style="margin: 8px 8px 0 0"-->
  <!--        >{{ tag }}-->
  <!--      </van-tag>-->
  <!--    </template>-->
  <!--    <template #footer>-->
  <!--      <van-button size="mini">联系我</van-button>-->
  <!--    </template>-->
  <!--  </van-card>-->
</template>

<style scoped></style>
